<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>碰撞与绝对布局</title>
	</head>
	<style>		
		#div02
		{
			width: 200px;
			height: 200px;
			border: 1px solid;
			position: fixed;/*绝对定位*/
			right: 20px;/*右边*/
			bottom: 20px;/*底边*/
		}
		#div03
		{
			width: 200px;
			height: 200px;
			border: 1px solid;
			position: fixed;/*绝对定位*/
			left: 20px;/*左边*/
			top: 20px;/*顶边*/
			z-index: 2;/*层*/
		}
	</style>		
	<body>		
		<div id="div02">
			<input type="image" src="img/2.jpg"width="200px"height="200px"/></div>		
		<div id="div03">
			<input type="image" src="img/3.jpg"width="200px"height="200px"/></div>
	</body>
</html>
<script>
	//窗体加载事件
	window.onload=function()
	{
		//计时器
		setInterval(moves,20);
	}	
	//xy轴方向
	var xf = 1;//1向右-1向左
	var yf = 1;//1向下-1向上
	function moves()
	{
		//获取图片对象
		var div=document.getElementById("div02");
		//获取div左边距离
		var left = div.offsetLeft;
		//获取div顶部距离
		var top = div.offsetTop;		
		if(left > 1090)
			xf = -1;
		if(left < 0)
			xf = 1;
		if(top > 450)
			yf = -1;
		if(top < 0)
			yf = 1;		
		//设置div左边顶距离
		div.style.left = (left + 2*xf)+"px";
		div.style.top = (top + 2*yf)+"px";
	}
</script>
